.config-comp-list {
    width: 284px;
    max-height: calc(100vh - 200px);
    height: calc(100vh - 200px);
    padding: 34px 20px 34px 28px;
    color: #33302d;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;

    .comp-list {
        display: grid;
        grid-gap: 16px 12px;
        grid-template-columns: repeat(2, 1fr);

        .comp-item_icon {
            vertical-align: middle;
            margin-right: 8px;
        }

        .popover_button_warp {
            overflow: hidden;
        }

        .el-button {
            width: 100%;
            margin-left: 0;
            background: #fff;
            border-radius: 2px;
            border: 1px solid #eaeaea;
            padding: 9px 4px;
            font-size: 14px;
            font-family: PingFangSC-Regular, 'PingFang SC';
            overflow: hidden;

            > span {
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
                white-space: nowrap;
                text-align: left;
                display: block;
            }
        }

        .el-button:focus,
        .el-button:hover {
            &:not(.is-disabled) {
                border: 1px solid #ff6b00;

                .comp-item_icon {
                    filter: drop-shadow(#ff6b00 100px 0);
                    transform: translateX(-100px);
                }
            }
        }
    }
}

.config-comp-title {
    font-size: 16px;
    font-family: STHeitiSC-Medium, STHeitiSC;
    font-weight: 500;
    margin-bottom: 16px;
}
